<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        flushLoginTicket();  // 进入登录页，则获取login ticket，该函数在下面定义。
    });

    // 登录验证函数, 由 onsubmit 事件触发
    var loginValidate = function(){
        var msg;
        if ($.trim($('#J_Username').val()).length == 0 ){
            msg = "用户名不能为空。";
        } else if ($.trim($('#J_Password').val()).length == 0 ){
            msg = "密码不能为空。";
        }
        if (msg && msg.length > 0) {
            $('#J_ErrorMsg').fadeOut().text(msg).fadeIn();
            return false;
            // Can't request the login ticket.
        } else if ($('#J_LoginTicket').val().length == 0){
            $('#J_ErrorMsg').text('服务器正忙，请稍后再试..');
            return false;
        } else {
            // 验证成功后，动态创建用于提交登录的 iframe
            $('body').append($('<iframe/>').attr({
                style: "display:none;width:0;height:0",
                id: "ssoLoginFrame",
                name: "ssoLoginFrame",
                src: "javascript:false;"
            }));
            return true;
        }
    }

    // 登录处理回调函数，将由 iframe 中的页同自动回调
    var feedBackUrlCallBack = function (result) {
        customLoginCallBack(result);

        deleteIFrame('#ssoLoginFrame');// 删除用完的iframe,但是一定不要在回调前删除，Firefox可能有问题的
    };

    // 自定义登录回调逻辑
    var customLoginCallBack = function(result){
        // 登录失败，显示错误信息
        if (result.login == 'fails'){
            $('#J_ErrorMsg').fadeOut().text(result.msg).fadeIn();
            // 重新刷新 login ticket
            flushLoginTicket();
        }
        // do more....
    }

    var deleteIFrame = function (iframeName) {
        var iframe = $(iframeName);
        if (iframe) { // 删除用完的iframe，避免页面刷新或前进、后退时，重复执行该iframe的请求
            iframe.remove()
        }
    };

    // 由于一个 login ticket 只允许使用一次, 当每次登录需要调用该函数刷新 lt
    var flushLoginTicket = function(){
        var _services = 'service=' + encodeURIComponent('http://localhost:5000/');
        $.getScript('http://localhost:5000/login?'+_services+'&get-lt=true&n='
                + new Date().getTime(),
                function(){
                    // 将返回的 _loginTicket 变量设置到  input name="lt" 的value中。
                    $('#J_LoginTicket').val(_loginTicket);
                });
        // Response Example:
        // var _loginTicket = 'e1s1';
    }

</script>
<form action="http://localhost:5000/login" method="post" onsubmit="return loginValidate();" target="ssoLoginFrame">
    <ul>
        <span class="red" style="height:12px;" id="J_ErrorMsg"></span>

        <li>
            <em>用户名：</em>
            <input name="username" id="J_Username" type="text" autocomplete="off" class="line" style="width: 180px" />
        </li>
        <li>
            <em>密 码：</em>
            <input name="password" type="password"  id="J_Password" class="line" style="width: 180px" />
        </li>

        <li class="mai">
            <em>&nbsp;</em>
            <input type="checkbox" name="rememberMe" id="rememberMe" value="true"/>
            &nbsp;自动登录
            <a href="/retrieve">忘记密码？</a>
        </li>
        <li>
            <em>&nbsp;</em>
            <input type="hidden" name="isajax" value="true" />
            <input type="hidden" name="isframe" value="true" />
            <input type="hidden" name="lt" value="" id="J_LoginTicket">
            <input type="hidden" name="_eventId" value="submit" />
            <input name="" type="submit" value="登录" class="loginbanner" />
        </li>
    </ul>
</form>
<a href="/index"> 跳转到index</a>